<template>
    <div class="pl13-pt13 balance-recharge">
      <h1 class="tc mt50" style="font-size: 37px; color: #F54727">{{price}}<span class="f16">￥</span></h1>
      <section class="mt20">
        <h2 class="f16" style="color: #747474">充值金额</h2>
        <ul class="mt10">
          <li @click="getGuige(index)" v-for="(item,index) in rechagerPrice" :key="item.index"  :class= "{select: istrue === index}">
            <p class="f20" style="color: #747474">{{item.price}}<span class="f14" style="vertical-align:text-top;">￥</span></p>
            <p class="f12" style="color: #969595">送{{item.recive}}</p>
          </li>
        </ul>
      </section>
      <i-button  type="success" class="mt15" shape="circle">立即充值</i-button>
      <aside class="mt50">
        <h3 class="f16" style="color: #747474">温馨提示:</h3>
        <ul class="f12 mt5" style="color: #969596">
          <li>1.充值成功后只限上车使用，概不退款</li>
          <li>2.充值失败后，资金将原路返回（1-3工作日到账）</li>
          <li>3.充值方式仅限微信支付</li>
        </ul>
      </aside>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'balance-recharge',
        data () {
          return {
            price: 0,
            istrue: 0,
            rechagerPrice: [{id: 1, price: 500, recive: 100},
              {id: 2, price: 400, recive: 20},
              {id: 3, price: 300, recive: 100},
              {id: 4, price: 200, recive: 100},
              {id: 5, price: 3000, recive: 100}
              ]
          };
        },
        methods: {
          balanceRechaer () {
            this.$router.push('/mine/userPay?id=1');
          },
          getGuige (index) {
            let count = 0;
            this.istrue = index;
            count = this.rechagerPrice[index].price - this.rechagerPrice[index].recive;
            this.price = count.toFixed(2);
          }
        },
        created () {
          this.getGuige(0);
        }
    };
</script>

<style lang="stylus" scoped>
  .balance-recharge
    h1
      span
          vertical-align text-top;
    section
     ul
       display flex; flex-flow wrap;
       li
         margin 0 5px 5px 0; min-width 110px;border  1px dotted #C0C0C0; border-radius 3px; padding 5px 0 5px 20px;
       li.select
         border-color #41B962; background #41B962;
         p
          color #fff!important;
    .mint-button--primary
        background #41B962;
    .mint-button::after
        background transparent;
</style>
